<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-card
        class="general-card"
        :style="{
        background: isDark
          ? 'linear-gradient(180deg, #312565 0%, #201936 100%)'
          : 'linear-gradient(180deg, #F7F7FF 0%, #ECECFF 100%)',
      }"
    >
      <div class="content-wrap">
        <div class="content">
          <a-statistic
              title="渠道收益￥"
              :value="count"
              :value-from="0"
              :precision="2"
              animation
              show-group-separator
          />
        </div>
        <div class="chart">
          <Chart v-if="!loading" :option="chartOption"/>
        </div>
      </div>
    </a-card>
  </a-spin>
</template>

<script setup lang="ts">
import {computed, watch} from 'vue'
import {useChart} from '@/hooks'
import {useAppStore} from '@/stores'
import {
  type SettlementDashboardChartCommonResp,
  getOverviewSettlementChannelByUserId as getData
} from "@/apis/settlement/earnings";

const appStore = useAppStore()
const isDark = computed(() => appStore.theme === 'dark')


const props = withDefaults(defineProps<Props>(), {
  userId: '',
})

interface Props {
  userId: string
}

const count = ref(0)
const growth = ref(0)
const chartData = ref<number[]>([])
const {chartOption} = useChart(() => {
  return {
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
    legend: {
      show: true,
      top: 'center',
      right: '20%',
      orient: 'vertical',
      icon: 'circle',
      itemWidth: 6,
      itemHeight: 6,
      textStyle: {
        color: '#4E5969',
      },
    },
    tooltip: {
      show: true,
    },
    series: [
      {
        name: '收益',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['30%', '50%'],
        label: {
          show: false,
        },
        data: chartData.value,
      },
    ],
  }
})

const loading = ref(false)
const colors = [
  '#8D4EDA', // 紫色
  '#00B2FF', // 蓝色
  '#86DF6C', // 绿色
  '#FFB800', // 金色
  '#FF6F61', // 珊瑚红
  '#4DD0E1', // 青色
  '#FFD54F', // 浅黄
  '#A1887F', // 棕灰
  '#BA68C8', // 淡紫
  '#90A4AE'  // 蓝灰
]
// 查询图表数据
const getChartData = async () => {
  try {
    loading.value = true
    // 先清空
    chartData.value = []
    // 后台获取统计数据
    const {data} = await getData(props.userId)
    count.value = data.total
    data.dataList.forEach((item: SettlementDashboardChartCommonResp, index) => {
      chartData.value.push({
        name: item.name,
        value: item.value,
        itemStyle: {
          color: data.length > 1 && index === data.length - 1 ? colors[colors.length - 1] : colors[index],
        },
      })
    })
  } finally {
    loading.value = false
  }
}

watch(
    () => props.userId,
    (newVal) => {
      if (newVal) {
        getChartData()
      }
    },
    {immediate: true}
)
</script>

<style scoped lang="less">
:deep(.arco-card) {
  border-radius: 4px;
}

:deep(.arco-card-body) {
  width: 100%;
  height: 134px;
  padding: 0;
}

.content-wrap {
  width: 100%;
  padding: 16px;
  white-space: nowrap;
}

:deep(.content) {
  float: left;
  width: 108px;
  height: 102px;
}

:deep(.arco-statistic) {
  .arco-statistic-title {
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
  }

  .arco-statistic-content {
    margin-top: 10px;
  }
}

.chart {
  float: right;
  width: calc(100% - 108px);
  height: 90px;
  vertical-align: bottom;
}

.label {
  padding-right: 8px;
  font-size: 12px;
}
</style>
